<template>
    <el-dialog v-model="visible" :width="800" @close="close">
        <template #header> 裂变明细 </template>
        <div class="content">
            <el-input v-model="userName" placeholder="请输入用户昵称" class="searchInput" @input="searchUser">
                <template #append>
                    <el-button :icon="Search" @click="clickSearch(userName)" />
                </template>
            </el-input>
            <ZwTable
                ref="tableRef"
                class="table-box"
                :option="tableOption"
                :row-key="getRowKey"
                :fetch-params="state.searchParams"
                :fetch-api="fetchApi()">
            </ZwTable>
        </div>
    </el-dialog>
</template>

<script setup lang="tsx">
import { ref, reactive } from 'vue';
import { Search } from '@element-plus/icons-vue';
// 引入表格组件
import ZwTable from '@/components/zw/table1.0/Table';
// 用户信息组件
import UserInfo from './UserInfo.vue';

import { deepCopy } from '@/utils/helper';

import { fissionDetail } from '@/api/smartMarketing/drainage/groupFission';

const tableRef = ref<any>(null); // table表格ref
let dt_title_event: any = null; // 延时查询数据倒计时
const userName = ref(''); // 搜索用户名
const visible = ref(false); // 控制弹框的展示

const tableOption = reactive([
    {
        prop: 'activity_name',
        label: '编号',
        render({ index }) {
            return <div>{index + 1}</div>;
        }
    },
    {
        prop: 'avatar',
        label: '用户信息',
        render({ row }) {
            return (
                <div class="user-info">
                    <UserInfo name={row.nickname} avatar={row.headimgurl}></UserInfo>
                </div>
            );
        }
    },
    {
        prop: 'created_at',
        label: '助力时间'
    },
    {
        prop: 'is_valid',
        label: '是否助力有效',
        render({ row }) {
            return <div>{row.is_valid === 1 ? '否' : '是'}</div>;
        }
    }
]);
const getRowKey = (row: any) => {
    return row.id;
};
// 表格参数
const defaultParams = reactive<any>({
    id: '', // 活动id
    name: '', // 用户昵称
    external_userid: '' // 裂变明细id
});
const state = reactive({
    searchParams: deepCopy(defaultParams)
});

const fetchApi = () => {
    return fissionDetail;
};

// 输入查询时延时查询
const search_dt_title = (v: any) => {
    if (dt_title_event) {
        window.clearTimeout(dt_title_event);
        dt_title_event = null;
    }
    dt_title_event = window.setTimeout(function () {
        state.searchParams.name = v;
    }, 1500);
};
// 输入查询用户
const searchUser = (v: string | number) => {
    search_dt_title(v);
};
// 点击查询
const clickSearch = (v: any) => {
    state.searchParams.name = v;
    tableRef.value.reload();
};
// 打开弹框
const open = (activeId: number, rowId: number) => {
    state.searchParams.id = activeId;
    state.searchParams.external_userid = rowId;
    visible.value = true;
};
// 关闭弹框
const close = () => {
    userName.value = '';
    state.searchParams.name = '';
};

defineExpose({
    open
});
</script>

<style lang="scss" scoped>
.content {
    height: 560px;
    :deep(.searchInput) {
        width: 335px;
    }
    :deep(.el-table) {
        height: 457px;
    }
    :deep(.el-table__inner-wrapper)::before {
        background-color: #fff;
    }
}
</style>
